<template>
  <div style="width: 350px;margin: auto;padding-top: 180px" >
  <a-form
      :model="formState"
      name="normal_login"
      class="login-form"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
  >
    <a-form-item
        label="账号"
        name="userId"
        :rules="[{ required: true, message: '请输入账号!' }]"
    >
      <a-input v-model:value="formState.userId">
        <template #prefix>
          <UserOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item
        label="密码"
        name="password"
        :rules="[{ required: true, message: '请输入密码!' }]"
    >
      <a-input-password v-model:value="formState.password">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>

    <div style="display: flex">
      <div style="flex: 2.1;margin-right: 10px">
        <a-form-item
            label="输入验证码"
            name="verification"
            :rules="[{ required: true, message: '请输入验证码!' }]"
        >
          <a-input v-model:value="formState.verification">
            <template #prefix>
              <verified-outlined  />
            </template>
          </a-input>
        </a-form-item>
      </div>

      <div style="flex: 1">
        <image-code :change="data.change_img_code" @click="changeImageCode" @getCode="backImageCode"></image-code>
      </div>


    </div>
    <div>
      <a-form-item name="remember"  style="height: 35px">
        <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
      </a-form-item>
    </div>

    <div style="width: 100%">
      <a-form-item>
        <div style="width: 100%;height: 50px;">
          <a-button  type="primary" html-type="submit" block>
            登录
          </a-button>
        </div>
      或
      <router-link to="/sign"><el-link type="primary">去注册</el-link></router-link>
    </a-form-item>
    </div>

  </a-form>
  </div>
</template>

<script>
import imageCode from "@/components/login/ImageCode";
import 'ant-design-vue/dist/antd.css';
import {reactive, computed, inject, ref} from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import Vue from 'vue'
import VueCookies from 'vue-cookies'
import md5 from "js-md5";
import request from "@/utils/request";
import Cookies from 'js-cookie'
import {notification} from "ant-design-vue";
import router from "@/router";
import store from "@/store";
import { message } from 'ant-design-vue';

export default {
  name: "login",
  data(){
    return{
      SignCode:ref('')
    }
  },

  components: {
    UserOutlined,
    LockOutlined,
    imageCode
  },

  mounted() {
    this.SignCode=store.getters.getCode
    this.getSignCode()
  },
  methods:{
    getSignCode(){
      if (this.SignCode===200){
        message.success('注册成功', 5)
      }else if (this.SignCode===333){
        message.warning('请先登录',5)
      }
      store.commit("setCode",'')
    }
  },

  setup() {

    const data = reactive({
      change_img_code: false, // 刷新验证码
      img_code:'',// 加密后的验证码值
    })

    // 刷新验证码操作
    const changeImageCode = ()=> {
      data.change_img_code = !data.change_img_code
    }

    // 接收组件返回加密后的验证码值
    const backImageCode = (code) =>{
      data.img_code = code
      console.log('data',data.img_code)
    }

    const $cookies = inject('$cookies');
    const formState = reactive({
      userId: '',
      password: '',
      verification:'',
      remember: true,
    });

    const onFinish = values => {
      let imageCode=md5(values.verification)
      if (data.img_code===imageCode) {
        let user = {
          userId: values.userId,
          password: md5(values.password)
        }

        const tiaozhuan = () => {
          router.push('/sms/sell')
        }

        request.post("http://localhost:8002/user/login", user).then(res => {
          console.log(res)
          if (res.code === 200) {
            if ($cookies.isKey('user'))
              $cookies.remove('user')
            $cookies.set('user', user)
            console.log("有执行cookie")
            if (values.remember!==true)
              $cookies.set("user",user,0);
            store.commit("setCode", 200)
            tiaozhuan()
          } else
            message.error('账号或密码错误！');


        })
      }else
        message.error('验证码错误！');

    };

    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };

    const disabled = computed(() => {
      return !(formState.userId && formState.password);
    });
    return {
      formState,
      onFinish,
      onFinishFailed,
      disabled,
      changeImageCode,
      backImageCode,
      data,
    };
  },
}


</script>

